<template>
  <div class="lkr-okrs" :style="{ 'height': documentClientHeight + 'px' }">
    <div class="search-bar">
      <div class="time-period">
        <el-cascader v-model="currentTime" :options="yearSeationArr" @change="changeCurtime" separator=""></el-cascader>
      </div>
      <div class="action-btns">
        <el-button type="primary" @click="showAddTargetDrawer">添加目标</el-button>
        <el-button @click="showRelationGraph">{{showGraph ? '列表视图' : '关系视图'}}</el-button>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <el-select v-model="curGoalTag" placeholder="请选择目标类型" style="margin-bottom: 20px;" @change="changeGoalTag" v-show="!showGraph">
          <el-option v-for="(item, index) in goalTag" :key="index" :value="item">{{item}}</el-option>
        </el-select>
        <div class="menu">
          <div style="height: 40px; line-height: 40px; padding: 0 20px; cursor: pointer;" @click="getAllDepartment" :class="{'active': currentDeptId ===''}">全部</div>
          <organization ref="organization" @curOrganization="getGoalExecuteDepartment" :showName="'departmentName'" />
        </div>
      </div>
      <div class="right">
        <goals v-show="!showGraph" ref="goalList" :postSearchTime.sync="currentTime" :showActions="true" @chooseGoal="showTargetDetail" @editTarget="editGoal" />
        <relationGraph v-show="showGraph" ref="relationGraph" :currentTime.sync="currentTime" :currentDeptId.sync="currentDeptId" @addKr="openAddOrEditKrDrawer" @addGoalUnderKr="addGoalUnderKr" @editGoal="showTargetDetail" />
      </div>
    </div>
    <addTarget ref="addOrEditGoal" @reload="refreshList" :drawerVisible.sync="AddTargetDrawerVisible" :documentClientHeight.sync="documentClientHeight" @closeAddTarget="AddTargetDrawerVisible = false" :userAsd="userAsd" :postFormTime.sync="currentTime"></addTarget>
    <addOrEditKr ref="addOrEditKr" @reload="refreshList" :drawerVisible.sync="AddKrDrawerVisible" @closeAddKr="AddKrDrawerVisible = false" :userAsd="userAsd"></addOrEditKr>
    <targetDetail ref="targetDetail" @reload="refreshList" :drawerVisible.sync="targetDetailDrawerVisible" :documentClientHeight.sync="documentClientHeight" :refresh.sync="refreshTargetDetail" :userAsd="userAsd" @hasRefreshed="hasRefreshedTargetDetail" @closeTargetDetail="targetDetailDrawerVisible = false" @openAddOrEditTargetDrawer="editGoal" @openAddOrEditKrDrawer="openAddOrEditKrDrawer"></targetDetail>
  </div>
</template>

<script>
import organization from './component/organization'
import goals from './component/goals'
import addTarget from './add-target'
import targetDetail from './target-detail'
import addOrEditKr from './add-or-edit-kr'
import relationGraph from './relation-graph'

export default {
  data () {
    return {
      documentClientHeight: '',
      curMenu: 0,
      goalTag: ['全部', '公司级','部门级','团队级'],
      curGoalTag: '',
      curGoalTagNumber: '',
      currentDeptId: '',
      yearSeationArr: [],
      currentTime: [],
      AddTargetDrawerVisible: false,
      AddKrDrawerVisible: false,
      targetDetailDrawerVisible: false,
      refreshTargetDetail: false,
      showGraph: false,
      userAsd: {}
    };
  },
  inject: ["reload"],
  components: {
    organization, goals, addTarget, targetDetail, relationGraph, addOrEditKr
  },
  async mounted () {
    this.setTimeArr();
    this.documentClientHeight = document.documentElement['clientHeight'] - 60
    window.onresize = () => {
      this.documentClientHeight = document.documentElement['clientHeight'] - 60
    }
    this.userAsd = await this.$httpN.postB('lkr/organization/asd');
    if(this.$route.params.goalId) await this.showTargetDetail(this.$route.params.goalId)
  },
  methods: {
    selectMenu(index) {
      this.curMenu = index
    },
    showTargetDetail(id) {
      this.targetDetailDrawerVisible = true
      this.$nextTick(() => {
        this.$refs.targetDetail.init(id);
      })
    },
    setTimeArr() {
      let year = parseInt((new Date).Format(`yyyy`));
      this.currentTime = [`${year}`, `02${(new Date).Format(`qq`)}`];
      this.yearSeationArr = []
      for (let i=-5; i<=5; i++) {
        this.yearSeationArr.push({
          value: `${year-i}`,
          label: `${year-i}年`,
          children: [{
            value: `0201`,
            label: '第1季度LKR'
          },{
            value: `0202`,
            label: '第2季度LKR'
          },{
            value: `0203`,
            label: '第3季度LKR'
          },{
            value: `0204`,
            label: '第4季度LKR'
          },{
            value: `0200`,
            label: '年度LKR'
          }]
        })
      }
    },
    changeCurtime(time) {
      this.curGoalTag = ''
      this.curGoalTagNumber = ''
      this.currentDeptId = ''
      this.$refs.organization.refresh()
    },
    getGoalExecuteDepartment(data) {
      this.currentDeptId = data ? data.id : '';
      this.$refs.goalList.searchExecuteDepartment(this.currentDeptId)
    },
    changeGoalTag(goalTagName) {
      if(goalTagName === this.goalTag[0]) {
        this.curGoalTagNumber = ''
      } else if(goalTagName === this.goalTag[1]) {
        this.curGoalTagNumber = '1'
      } else if (goalTagName === this.goalTag[2]) {
        this.curGoalTagNumber = '2'
      } else {
        this.curGoalTagNumber = '3'
      }
      this.$refs.goalList.searchGoalTag(this.curGoalTagNumber)
    },
    showAddTargetDrawer() {
      this.AddTargetDrawerVisible = true
      this.$nextTick(() => {
        this.$refs.addOrEditGoal.init();
      })
    },
    addGoalUnderKr(krId, krName) {
      this.AddTargetDrawerVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrEditGoal.init(false, krId, krName);
      })
    },
    editGoal(id) {
      this.AddTargetDrawerVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrEditGoal.init(id);
      })
    },
    refreshList() {
      this.refreshTargetDetail = true
      this.$refs.goalList.getGoalList(true)
      if(this.showGraph) this.$refs.relationGraph.getGoalList()
    },
    getAllDepartment() {
      this.getGoalExecuteDepartment()
      this.$refs.organization.refresh()
    },
    hasRefreshedTargetDetail() {
      this.refreshTargetDetail = false
    },
    openAddOrEditKrDrawer(krId, goalId, goalName) {
      this.AddKrDrawerVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrEditKr.init(krId, goalId, goalName);
      })
    },
    showRelationGraph() {
      this.showGraph = !this.showGraph;
      if(this.showGraph) this.$refs.relationGraph.getGoalList()
    }
  }
}
</script>

<style lang='scss' scoped>
.el-dropdown-menu::-webkit-scrollbar, .menu::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color:red;
}
.el-dropdown-menu::-webkit-scrollbar-thumb, .menu::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px #DEDEDE;
  background: rgba(0,0,0,0.2);
  scrollbar-arrow-color:red;
}
.el-dropdown-menu::-webkit-scrollbar-track, .menu::-webkit-scrollbar-track {/*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #F5F5F5;
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}

.lkr-okrs {
  height: calc(100% - 60px);
  overflow: hidden;
  padding: 0 50px;
  .search-bar {
    display: flex;
    justify-content : space-between;
    border-bottom: 1px solid #E6E6E6;
    height: 75px;
    .time-period {
      display: flex;
      align-items: center;
      position: relative;
      h3 {
        padding: 0;
        margin: 0;
        line-height: 75px;
      }
      .el-dropdown-link {
        cursor: pointer;
        &:hover {
          color: #3296FA;
        }
      }
    }
    .action-btns {
      margin: auto 0;
    }
  }
  .content {
    height: calc(100% - 115px);
    margin: 20px 0;
    overflow-y: auto;
    display: flex;
    .left {
      width: 200px;
      height: 100%;
      .menu {
        height: calc(100% - 56px);
        overflow-y: auto;
        .active {
          background-color: #E8EEF6;
          color: #3296FA;
        }
      }
    }
    .right {
      position: relative;
      margin-left: 20px;
      width: calc(100% - 200px);
      flex: 1;
      height: 100%;
    }
  }
}
</style>